<template>
  <el-row class="login-page">
    <div class="a">
      <div class="form-container">
        <div class="title">
          <button @click="toggleScanLogin" class="scan-login-btn">
            扫码登录<img src="../../assets/wxlg.png" alt="" width="15%" />
          </button>
          <h1>登录/注册</h1>
        </div>

        <RegisterForm v-if="isRegister" @toggle-login="isRegister = false" />

        <!-- <el-form
          ref="registerForm"
          size="large"
          autocomplete="off"
          v-if="isRegister"
        >
          <el-form-item>
            <el-radio-group v-model="registerType">
              <el-radio-button value="employ">我是求职者</el-radio-button>
              <el-radio-button value="boss">我是招聘方</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-input :prefix-icon="User" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              :prefix-icon="Lock"
              type="password"
              placeholder="请设置密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <div class="verification-code-group">
              <el-input
                :prefix-icon="Lock"
                placeholder="请输入验证码"
              ></el-input>
              <el-button
                type="primary"
                class="verification-code-btn"
                @click="sendVerificationCode"
              >
                获取验证码
              </el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="agreement">
              <label>
                <input type="checkbox" v-model="agreedToTerms" />
                <span>同意《注册协议》和《隐私政策》</span>
              </label>
            </div>
            <el-button
              class="button"
              type="primary"
              auto-insert-space
              @click="register"
            >
              注册
            </el-button>
          </el-form-item>
          <el-form-item class="flex">
            <el-link type="info" :underline="false" @click="isRegister = false">
              ← 返回登录
            </el-link>
          </el-form-item>
        </el-form> -->

        <LoginPass v-else @toggle-register="isRegister = true"></LoginPass>

        <!-- <el-form ref="loginForm" size="large" autocomplete="off" v-else>
          <el-form-item>
            <el-radio-group v-model="loginType" size="large">
              <el-radio-button value="employ">我是求职者</el-radio-button>
              <el-radio-button value="boss">我是招聘方</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-radio-group
              v-model="loginMethod"
              @change="handleLoginMethodChange"
            >
              <el-radio :value="1">密码登录</el-radio>
              <el-radio :value="2">验证码登录</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-input :prefix-icon="User" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item v-if="loginMethod === 1">
            <el-input
              :prefix-icon="Lock"
              type="password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item v-else>
            <div class="verification-code-group">
              <el-input
                :prefix-icon="Lock"
                placeholder="请输入验证码"
              ></el-input>
              <el-button
                type="primary"
                class="verification-code-btn"
                @click="sendVerificationCode"
              >
                获取验证码
              </el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="agreement">
              <label>
                <input type="checkbox" v-model="agreedToTerms" />
                <span>同意《登录协议》和《隐私政策》</span>
              </label>
              <a href="#">忘记密码</a>
            </div>
            <el-button
              class="button"
              type="primary"
              auto-insert-space
              @click="login"
            >
              登录
            </el-button>
          </el-form-item>
          <el-form-item class="flex">
            <el-link type="info" :underline="false" @click="isRegister = true">
              注册 →
            </el-link>
          </el-form-item>
        </el-form> -->
      </div>

      <!-- <div class="scan-login-form" v-if="showScanLogin">
        <el-form ref="scanLoginForm" size="large" autocomplete="off">
          <el-form-item>
            <p class="text-center">微信扫码登录</p>
            <img src="../../assets/offer.jpg" alt="" width="70%" />
          </el-form-item>
          <el-form-item>
            <p style="font-size: larger">职为你来小程序</p>
            <img src="../../assets/gzh.jpg" alt="" width="70%" />
            <span style="font-size: x-small">客服电话 400-110-119 </span>
            <span style="font-size: x-small">工作时间：8:00-22:00 </span>
            <span style="font-size: xx-small">
              人力资源服务许可 | 证营业执照朝阳区 | 人社局监督电话</span
            >
          </el-form-item>
        </el-form>
      </div> -->

      <LoginWx v-if="showScanLogin"></LoginWx>

      <!-- <div class="menu-container" v-else>
        <img src="@/assets/offer.jpg" alt="描述性文字" width="100%" />
        <div class="menu-item">
          <div class="text-content">
            <h3>找工作</h3>
            <p>上职你来直接沟通</p>
          </div>
          <div class="icon boss-icon">职为你来</div>
        </div>
        <div class="menu-item">
          <div class="text-content">
            <h3>秒沟通</h3>
            <p>在线聊天及时沟通</p>
          </div>
          <div class="icon boss-icon">职为你来</div>
        </div>
        <div class="menu-item">
          <div class="text-content">
            <h3>任性选</h3>
            <p>各大行业职位任你选</p>
          </div>
          <div class="icon boss-icon">职为你来</div>
        </div>
        <div class="menu-item">
          <div class="text-content">
            <h3>等你来</h3>
            <p>你的offer在这里哦</p>
          </div>
          <div class="icon boss-icon">职为你来</div>
        </div>
        <img src="@/assets/bg.jpg" alt="描述性文字" width="100%" />
      </div> -->
      <RightView v-else></RightView>
    </div>
  </el-row>
</template>

<script setup>
import { ref } from 'vue'
import RegisterForm from './components/RegisterForm.vue'
import LoginPass from './components/LoginPass.vue'
import LoginWx from './components/LoginWx.vue'
import RightView from './components/RightView.vue'
const isRegister = ref(false)

// const registerType = ref('employ') // 默认为求职者

const showScanLogin = ref(false)

// const register = () => {
//   // 注册的逻辑
//   console.log('执行注册操作')
// }

// const login = () => {
//   // 登录的逻辑
//   console.log('执行登录操作')
// }

// const handleLoginMethodChange = () => {
//   // 处理登录方式改变的逻辑
// }

const toggleScanLogin = () => {
  showScanLogin.value = !showScanLogin.value
}
</script>

<style lang="scss" scoped>
.login-page {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background:
    url('@/assets/bg.jpg') no-repeat 60% center / 240px auto,
    url('@/assets/login_bg.jpg') no-repeat center / cover;
  border-radius: 0 20px 20px 0;

  .a {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    overflow: hidden; /* 隐藏超出圆角部分的内容 */
    background: #fff;
  }

  .form-container {
    width: 100%;
    max-width: 351px; /* 限制最大宽度 */
    padding: 40px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    // border-radius: 15px;
    display: flex;
    flex-direction: column;

    .title {
      text-align: center;
      position: relative;

      .scan-login-btn {
        position: absolute;
        top: 0;
        right: 0;
        padding: 0;
        background: transparent;
        border: none;
        cursor: pointer;
        color: #666666;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }
    }
    .button {
      width: 100%;
    }
    .flex {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }
    // .verification-code-group {
    //   display: flex;
    //   align-items: center;
    //   .verification-code-btn {
    //     margin-left: 15px;
    //   }
    // }
    .agreement {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
      font-size: 0.875rem;
    }
    .agreement a {
      margin-left: 2rem;
      color: #3b82f6;
    }
  }

  // .scan-login-form {
  //   width: 100%;
  //   max-width: 180px; /* 限制最大宽度 */
  //   padding: 30px;
  //   background-image: linear-gradient(130deg, #f9fcfd 0%, #d6f1fa 53%);
  //   height: 100%;
  //   display: flex;
  //   flex-direction: column;
  //   align-items: center;
  // }
}
</style>
